<template>
   <view class="step-bar">
    <view
      v-for="(item, index) in list"
      :key="item"
      class="step-bar-item"
      :style="{ width: 100/list.length + '%' }"
    >
      <view
        :class="
          active > index
            ? 'step-bar-body ok'
            : active === index
            ? 'step-bar-body active'
            : 'step-bar-body'
        "
      >
        <view :class="active > index ? 'step-pos avater' : 'step-pos step-bar-index'">
          <template v-if="active <= index">{{ index + 1 }}</template>
          <template v-else>
            <ve-icon name="steps" width="36" height="36" />
          </template>
          <view
            v-if="index < list.length - 1"
            class="step-bar-border"
            :style="{ width: list.length === 2 ? '280rpx' : '160rpx' }"
          ></view>
        </view>
        <view class="step-bar-text">{{ item }}</view>
      </view>
    </view>
  </view>
</template>
<script>
/**
 * ve-modal 弹框
 * @property {Array} list 步骤条list
 */
export default {
  name: 'step-bar',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    active: {
      type: Number,
      default: 0
    }
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.step-bar {
  display: flex;
  &-item {
    text-align: center;
    padding: 32rpx 0;
  }
  &-body {
    font-size: 28rpx;
    font-weight: 400;
    color: #86909C;
    line-height: 39rpx;
  }
  &-index {
    width: 36rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    background: #F2F3F5;
    border-radius: 50%;
    text-align: center;
  }
  .step-pos {
    margin: 0 auto;
    position: relative;
  }
  &-border {
    height: 2rpx;
    background: #E5E6EB;
    position: absolute;
    left: 52rpx;
    top: 18rpx;
  }
  &-text {
    margin-top: 10rpx;
  }
  .avater {
    width: 36rpx;
    height: 36rpx;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  .active {
    color: #165DFF;
    .step-bar-index {
      background: #165DFF;
      color: #F2F3F5;
    }
  }
  .ok {
    .step-bar-index {
      background: #E8F3FF;
    }
    .step-bar-text {
      color: #1d2129;
    }
  }
}
</style>
